$(function () {

    //alert(basePath);
    loadHtml();
    //showChart();
    showCharts.showLine();
});
var chartsObj = [];
function showChart() {
    for(var i=0;i<4;i++) {
        chartsObj.push(echarts.init(document.getElementById('test_left_'+i)));
        chartsObj.push(echarts.init(document.getElementById('test_right_'+i)));
    }
    $.each(chartsObj, function (k) {
        chartsObj[k].showLoading({
            text : '正在加载数据...'
        });
    });
    $.each(chartsObj, function (j) {
        var option = chartsOption.getLineOption();
        chartsObj[j].setOption(option);
        chartsObj[j].hideLoading()
    });
}

function loadHtml() {
    var html = '';
    for(var i=0;i<4;i++) {
        html += '<div class="row" style="width: 1000px;">\n' +
            '        <div class="col-xs-6 chartDiv" id="test_left_'+i+'">\n' +
            '        </div>\n' +
            '        <div class="col-xs-6 chartDiv " id="test_right_'+i+'">\n' +
            '        </div>\n' +
            '    </div>';
    }
    $("#charts").html(html);

}
var showCharts = {
    showLine:function () {

        var myChart = echarts.init(document.getElementById('test_left_1'));
        //myChart.showLoading();
        var option = chartsOption.getBarOption();
        myChart.setOption(option);
        //myChart.hideLoading();
        //myChart.clear();
    }

};


var chartsOption = {
    getLineOption:function () {
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }]
        };

        return option;

    },
    getBarOption:function () {
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        return option;

    }
};